
//中间大图轮播的js
(function () {
  class GapSwiper {
    constructor(el) {
      this.el = el;
      this.oUl = this.el.find("ul");
      this.oOl = this.el.find("ol");
      this.imgIndex = 0; //图片的下标
      this.point = 0; //
      this.init();
      this.mouseHandler();
      this.clickHandler();
    }
    //初始化
    init() {
      //把图片的第一张,克隆到最后一张
      this.oUl.children().eq(0).clone(true).appendTo(this.oUl);
      //动态创建点
      for (let i = 0; i < this.oUl.children().length - 1; i++) {
        $(`<li class=${i == 0 ? "current" : ""}>${i + 1}</li>`).appendTo(
          this.oOl
        );
      }
      this.autoPlay();
    }
    autoPlay() {
      this.timer = setInterval(() => {
        this.point++;
        this.imgIndex++;
        this.autoToggle();
      }, 2000);
    }
    //根据id进行切换
    autoToggle() {
      if (this.imgIndex > 6) {
        this.imgIndex = 1;
        this.oUl.css("left", 0);
      }
      if (this.point > 6) {
        this.point = 0;
      }
      this.oUl.animate({
        left: -this.imgIndex * this.oUl.children().eq(0).width(),
      });
      //给下橙色标记添加样式
      this.oOl
        .children()
        .eq(this.point)
        .addClass("current")
        .siblings()
        .removeClass("current");
    }
    mouseHandler() {
      this.el
        .mouseenter(() => {
          clearInterval(this.timer);
        })
        .mouseleave(() => {
          this.autoPlay();
        });
    }

    clickHandler() {
      let self = this;
      //事件委托,把事件绑定在父元素,子元素负责触发
      this.oOl.on("click", "li", function () {
        var $index = $(this).index();
        console.log($index);
        self.point = self.imgIndex = $index;
        self.autoToggle();
      });
    }
  }
  $.fn.extend({
    Bannerswipe() {
      new GapSwiper(this);
    },
  });
})();
//使用
$(function () {
  $(".swper1").Bannerswipe();
});


//懒加载
$(function() {
  $("img.lazy").lazyload({effect: "fadeIn"});

  });
